<template>
  <div>
    <table>
      <caption>
        欢迎光临 vue开发的收银系统 水果店
      </caption>
      <tr>
        <td style="font-weight: 700">苹果10￥/斤,折扣＜8折＞</td>
      </tr>
      <tr>
        <td>
          请输入你要购买的斤数<input v-model.number="weight" type="text" />
        </td>
      </tr>
      <tr>
        <td><button @click="price">结账买单-</button></td>
      </tr>
      <tr>
        <td>结账单:总价:{{ num1===''?0:num1 }}元 折后价:{{ num2===''?0:num2 }}元 省了:{{ num3===''?0:num3 }}元</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      weight: 0,
      num1: "",
      num2: "",
      num3: "",
    };
  },
  methods: {
    price() {
      this.num1 = this.weight * 10;
      this.num2 = this.weight * 8;
      this.num3 = this.num1 - this.num2;
    },
  },
};
</script>

<style>
table,
tr,
td {
  border: 1px solid #000;
  font-size: 20px;
}
td {
  width: 500px;
  height: 40px;
  line-height: 40px;
  text-align: center;
}
table {
  margin: 50px auto;
}
</style>